<template>
    <div class="imgupload">
        <div class="imgItemParent" @click="checkFun(index)" v-for="(item,index ) in pageImgs" :key="index" v-show="index < limit" :class="{'longSize': limit == 1}">
            <div class="imgItem" :class="{active:item.fileCheck}">
                <img class="content" :src="item.fileBlob" v-show="item.fileName">
                <i class="el-icon-delete" v-show="item.fileName && edit  " @click.stop="deleteImg(index)"></i>
            </div>
            <div class="name" :title="item.fileName" v-if="item.fileName">
                <i class="el-icon-success" v-show="item.fileCheck"></i>
                <i class="no-check" v-show="!item.fileCheck"></i>
                <span :class="{active:item.fileCheck}">{{item.fileName}}</span>
            </div>
        </div>

		<div class="imgItemParent" :class="{'longSize': limit == 1}" v-show="pageImgs.length < limit  && edit">
			<div class="imgItem">
				<i class="el-icon-plus"></i>
				<input type="file" accept="image/*" v-if="isImgSave" @change="imgChange" ref="imgRef">
			</div>
		</div>

        <div style="clear: both;"></div>
    </div>
</template>

<script>
    export default {
        props: ['imgList', 'limit', 'isMultiple', 'type','isImgSave','checkSize','edit'],
        data() {
            return {
                pageImgs: []
            }
        },
        methods: {
			deleteImg(index) { //删除图片
				let self = this;
				let imgObj = self.pageImgs[index];
				let params = {ids:[imgObj.id]};
				this.$confirm('确定删除图片？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: "/jinl/file/deleteFileByIds",
						method: "post",
						data: JSON.stringify(params),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.pageImgs.splice(index, 1);
						}
					});
				})
			},

            checkFun(index) { //选中图片 
				if(this.isImgSave && this.edit) {
					if(this.isMultiple){
						let fileCheck = this.pageImgs[index].fileCheck;
						this.pageImgs[index].fileCheck = fileCheck == 0? 1:0;
					}else{
						if(this.limit > 1 ){
							let fileCheck = this.pageImgs[index].fileCheck;
							this.pageImgs.forEach((item) => {item.fileCheck = 0});
							this.pageImgs[index].fileCheck = fileCheck == 0? 1:0;
						}
					}
				}
            },

			imgChange(e, index) { //选择文件
				let self = this;
				if (e.target.files.length) {
					let file = e.target.files[0];
                    console.log(file.type)
					if (file.type !== 'image/jpg' && file.type !== 'image/jpeg') {
                        self.$message.warning('图片格式为JPG！')
						return false
					}
					var reader = new FileReader();
					let fileCheck = self.limit > 1?0:1;
					if(this.checkSize){
						let size = file.size /1024 /1024;
						if(size > 1){
							self.$message.warning('图片小于1M！')
							self.$refs.imgRef.value = '';
							return;
						}
					}
					reader.readAsDataURL(file);
					reader.onload = (eve) => {
						self.pageImgs.push({
							fileBlob: eve.target.result,
							fileName: 'bcsm.jpg',
							fileCheck: fileCheck
						});
						self.uploadImageToBack('bcsm.jpg', eve.target.result);
					}

				}
			},

			getImages(){
				return 	this.pageImgs;
			},

            uploadImageToBack(fileName, fileBlob) {
				let self = this;
				let fileCheck = false;
				let params = {
					fileName: fileName,
					fileType: this.type,
					fileCheck:fileCheck,
					fileBlob: fileBlob
				};
				self.$http({
					url: "/jinl/file/addFileByBcsm",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						let id = resp.result;
						let len = self.pageImgs.length -1;
						self.pageImgs[len].id = id;
						self.$refs.imgRef.value = '';
					}
				});
            }
        },
        watch: {
            imgList(val) {
                this.pageImgs = val;
            }
        },
        mounted() {
            this.pageImgs = this.imgList;
        }
    }
</script>

<style scoped lang="scss">
    .imgupload {
        .imgItemParent {
            float: left;
            margin-right: 20px;
            .name {
                padding: 5px 0;
                font-size: 12px;
                color: #333333;
                text-align: center;
                width: 120px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                i {
                    font-size: 18px;
                    vertical-align: middle;
                    margin-right: 5px;
                    &.el-icon-success {
                        color: #ff1616;
                    }
                    &.no-check {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        border: 1px solid #cccccc;
                        border-radius: 50%;
                    }
                }
                span {
                    vertical-align: middle;
                    &.active {
                        color: #ff1616;
                    }
                }
            }
            &.longSize {
                .imgItem {
                    width: 200px;
                    height: 40px;
                }
            }
        }
        .imgItem {
            border: 1px dashed #cccccc;
            width: 120px;
            height: 80px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f2f2f2;
            // padding: 5px;
            &.active {
                border: 1px solid #ff1616;
                background-color: #ffeeee;
            }
            .el-icon-plus {
                font-size: 30px;
                color: #cccccc;
            }
            .el-icon-delete {
                font-size: 12px;
                position: absolute;
                right: 0;
                top: 0;
                padding: 5px;
                cursor: pointer;
                z-index: 2;
                background: #8e8888b8;
                color: #ffffff;
            }
            input {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
            .content {
                max-width: 100%;
                max-height: 100%;
                width: 120px;
                height: 80px;
            }
            .click {
                font-size: 12px;
            }
        }
    }
</style>
